<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增新闻设置')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <th:block th:include="include :: cropper-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-config-add">
        <input name="channelId" id="channelId" type="hidden">
        <!--<div class="form-group">
            <label class="col-sm-3 control-label is-required">法人机构：</label>
            <div class="col-sm-8">
                <select name="deptId" id="deptId" class="form-control m-b" onchange="deptChange()"
                        th:with="type=${@dept.selectDeptListByType('2')}"
                        required>
                    <option value="">请选择</option>
                    <option th:each="dept : ${type}" th:text="${dept.deptName}" th:value="${dept.deptId}"></option>
                </select>
            </div>
        </div>-->
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">热点频道：</label>
            <div class="col-sm-8">
                <select name="channelIds" id="channelIds" class="form-control m-b" onchange="channelIdChange()">
                    <option value="">请选择</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">新闻BANNER：<span
                    style="color: red">(750px*580px)</span>：</label>
            <div class="col-sm-8">
                <input type="hidden" id="banner" name="banner" >
                <div class="imageBox">
                    <img id="imgId"
                         th:src="@{/img/default.png}"
                         th:onerror="'this.src=\'' + @{'/img/default.png'} + '\''">
                </div>
                <div class="action">
                    <div class="new-contentarea tc">
                        <a href="javascript:void(0)" class="upload-img"><label for="inputImage">上传图像</label>
                        </a>
                        <input type="file" name="poster" id="inputImage" accept="image/*"/>
                    </div>
                    <button type="button" class="btn-custom" data-method="zoom" data-option="0.1"><i
                            class="fa fa-search-plus"></i></button>
                    <button type="button" class="btn-custom" data-method="zoom" data-option="-0.1"><i
                            class="fa fa-search-minus"></i></button>
                    <button type="button" class="btn-custom" data-method="rotate" data-option="-45"><i
                            class="fa fa-rotate-left"></i></button>
                    <button type="button" class="btn-custom" data-method="rotate" data-option="45"><i
                            class="fa fa-rotate-right"></i></button>
                    <button type="button" class="btn-custom" data-method="scaleX" data-option="-1"><i
                            class="fa fa-arrows-h"></i></button>
                    <button type="button" class="btn-custom" data-method="scaleY" data-option="-1"><i
                            class="fa fa-arrows-v"></i></button>
                    <button type="button" class="btn-custom" data-method="reset"><i class="fa fa-refresh"></i>
                    </button>
                </div>
            </div>
        </div>


        <div class="form-group">
            <label class="col-sm-3 control-label is-required">热点新闻最大条数：</label>
            <div class="col-sm-8">
                <input name="maxHotNums" class="form-control" type="number" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">其他频道显示条数：</label>
            <div class="col-sm-8">
                <input name="maxOtherNums" class="form-control" type="number" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">首页自定义标题：</label>
            <div class="col-sm-8">
                <input name="defineTitle" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">新闻首页显示名片
                ：</label>
            <div class="col-sm-8">
                <select name="indexCardSts" class="selectpicker form-control m-b"
                        th:with="type=${@dict.getType('sys_sts')}" required>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                            th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: cropper-js"/>
<script th:inline="javascript">
    var prefix = ctx + "config/config"
    $("#form-config-add").validate({
        focusCleanup: true
    });
    var cropper;
    var croppable = false;
    $(window).on('load', function () {
        deptChange();
        var image = document.getElementById('imgId');
        cropper = new Cropper(image, {
            aspectRatio: 1.35,//设置宽高比例
            viewMode: 1,
            autoCropArea: 1,
            //preview: '.img-preview',
            ready: function () {
                croppable = true;
            }
        })

        $('#inputImage').on('change', function () {
            var reader = new FileReader();
            var file = $('#inputImage')[0].files[0];
            if (/^image\/\w+$/.test(file.type)) {
                reader.onload = function (e) {
                    if (croppable) {
                        cropper.replace(e.target.result)
                    }
                }
                reader.readAsDataURL(this.files[0]);
            } else {
                $.modal.alertWarning('请选择一个图片文件。');
            }
        });

        $('.btn-custom').on('click', function (e) {
            if (!croppable) {
                $.modal.alertWarning("裁剪框加载中,请稍候...");
                return;
            }
            var data = {
                method: $(this).data('method'),
                option: $(this).data('option') || undefined,
            };
            var result = cropper[data.method](data.option, data.secondOption);
            if (['scaleX', 'scaleY'].indexOf(data.method) !== -1) {
                $(this).data('option', -data.option)
            }
        })
    });
    //设置裁剪高度
    $(window).resize(function () {
        $('.imageBox').height("300px");
    }).resize();
    if (!HTMLCanvasElement.prototype.toBlob) {
        Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
            value: function (callback, type, quality) {
                var canvas = this;
                setTimeout(function () {
                    var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]);
                    var len = binStr.length;
                    var arr = new Uint8Array(len);
                    for (var i = 0; i < len; i++) {
                        arr[i] = binStr.charCodeAt(i);
                    }
                    callback(new Blob([arr], {
                        type: type || 'image/png'
                    }));
                });
            }
        });
    }
    function submitHandler() {
        if (!croppable) {
            $.modal.alertWarning("裁剪框加载中,请稍候...");
            return
        }
        if ($.validate.form()) {
            //校验图片上传
            const inputImage = $("#inputImage").val();
            if (inputImage == '') {
                $.modal.alertError("请上传图片！");
                return
            }
            cropper.getCroppedCanvas().toBlob(function (img) {
                var formdata = new FormData();
                formdata.append("file", img);
                formdata.append("fileType", "/ecard/newsBanner");
                $.ajax({
                    url: ctx + "common/uploadCropperImage",
                    data: formdata,
                    type: "post",
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        $("#banner").val(result.data.fileUrl);
                        $.operate.save(prefix + "/add", $('#form-config-add').serialize());
                    }
                })
            });
        }
    }


    $(".file-upload").fileinput({
        uploadUrl: ctx + 'common/upload/ecard',
        maxFileCount: 1,
        autoReplace: true
    }).on('fileuploaded', function (event, data, previewId, index) {
        $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
    }).on('fileremoved', function (event, id, index) {
        $("input[name='" + event.currentTarget.id + "']").val('')
    })

    function deptChange() {
        var deptId = $('#deptId').val();
        if (deptId != "") {
            $.ajax({
                type: "post",
                url: ctx + "config/channelList/channelList",
                data: {"deptId": deptId},
                success: function (result) {
                    if (result.code == web_status.SUCCESS) {
                        var channelIdStr = '<option value="">请选择</option>';
                        var channelData = result.data;
                        for (var i = 0; i < channelData.length; i++) {
                            channelIdStr += '<option value="' + channelData[i].channelId + '">' + channelData[i].name + '</option>';
                        }
                        $('#channelIds').html(channelIdStr);
                    }
                }
            });
        }
    }

    function channelIdChange() {
        $('#channelId').val($('#channelIds').val());
    }
</script>
</body>
</html>